<template>
  <div id="map"></div>
</template>

<script setup>
import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import { default as proj4 } from "proj4";
import mapJson from "../assets/南沙模型-DN400.json";
import { onMounted } from "vue";

// mapJson.links.features.forEach((item) => {
//   let arr = [];
//   item.geometry.coordinates.forEach((item) => {
//     arr.push(tranformCoordinate(item));
//   });
//   item.geometry.coordinates = arr;
// });
// mapJson.nodes.features.forEach((item) => {
//   let arr = tranformCoordinate(item.geometry.coordinates);
//   item.geometry.coordinates = arr;
// });
console.log(mapJson);

let map;

function initMap() {
  map = new maplibregl.Map({
    container: "map", // container id
    style: "https://demotiles.maplibre.org/style.json", // style URL
    center: [113.49, 22.74], // starting position [lng, lat]
    zoom: 10, // starting zoom
  });
}
function addPoint() {
  // Add a GeoJSON source with 15 points
  map.addSource("conferences", {
    type: "geojson",
    data: mapJson.nodes,
  });
  // Add a symbol layer
  map.addLayer({
    id: "conferences",
    type: "circle",
    source: "conferences",
    paint: {
      "circle-radius": 10,
      "circle-color": "#3887be",
    },
  });
}
function addLine() {
  map.addSource("route", {
    type: "geojson",
    data: mapJson.links,
  });
  map.addLayer({
    id: "route",
    type: "line",
    source: "route",
    layout: {
      "line-join": "round",
      "line-cap": "round",
    },
    paint: {
      "line-color": "#888",
      "line-width": 8,
    },
  });
}
function addUnderlay() {
  map.addSource("wms-test-source", {
    type: "raster",
    tiles: [
      "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=f69df935f2b4e5d06629d91c56be2809",
      "http://t1.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=f69df935f2b4e5d06629d91c56be2809",
      "http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=f69df935f2b4e5d06629d91c56be2809",
      "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=f69df935f2b4e5d06629d91c56be2809",
    ],
    tileSize: 256,
  });
  map.addLayer({
    id: "tdt-layer",
    type: "raster",
    source: "wms-test-source",
  });
}
// EPSG:2326坐标转WGS 84坐标
function tranformCoordinate(point) {
  // const fromProjection = `PROJCS["Hong Kong 1980 Grid System",GEOGCS["Hong Kong 1980",DATUM["Hong_Kong_1980",SPHEROID["International 1924",6378388,297],TOWGS84[-162.619,-276.959,-161.764,-0.067753,2.243648,1.158828,-1.094246]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4611"]],PROJECTION["Transverse_Mercator"],PARAMETER["latitude_of_origin",22.3121333333333],PARAMETER["central_meridian",114.178555555556],PARAMETER["scale_factor",1],PARAMETER["false_easting",836694.05],PARAMETER["false_northing",819069.8],UNIT["metre",1,AUTHORITY["EPSG","9001"]],AUTHORITY["EPSG","2326"]]`;
  const fromProjection = `PROJCS["Beijing 1954 / 3-degree Gauss-Kruger CM 117E",GEOGCS["Beijing 1954",DATUM["Beijing_1954",SPHEROID["Krassowsky 1940",6378245,298.3],TOWGS84[31.4,-144.3,-74.8,0,0,0.814,-0.38]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4214"]],PROJECTION["Transverse_Mercator"],PARAMETER["latitude_of_origin",0],PARAMETER["central_meridian",117],PARAMETER["scale_factor",1],PARAMETER["false_easting",500000],PARAMETER["false_northing",0],UNIT["metre",1,AUTHORITY["EPSG","9001"]],AUTHORITY["EPSG","2436"]]`;
  const toProjection = `GEOGCS["WGS 84",DATUM["WGS_1984",SPHEROID["WGS 84",6378137,298.257223563,AUTHORITY["EPSG","7030"]],AUTHORITY["EPSG","6326"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4326"]]`;
  const newCoordinates = proj4(fromProjection, toProjection, point);
  return [newCoordinates[0] - 3, newCoordinates[1]]; // 返回数组格式
}
function addHandler() {
  map.on("click", "conferences", (e) => {
    console.log(e.features[0].properties);
  });
  map.on("click", "route", (e) => {
    console.log(e.features[0].properties);
  });
}

onMounted(() => {
  initMap();
  addHandler();
  map.on("load", () => {
    addUnderlay();
    addLine();
    addPoint();
  });
});
</script>

<style scoped>
#map {
  height: 100vh;
  width: 100vw;
}
</style>
